<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click="addDialog">添加</el-button>
        <el-table border style="margin-top:20px" :data="tableData.records"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column label="品牌名称" prop="tmName" align="center" ></el-table-column>
            <el-table-column label="品牌LOGO" align="center" >
                <template slot-scope="{row}">
                    <img :src="row.logoUrl" width="100" height="60">
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateDialog(row)">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                    @click="delTrademark(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="text-align: center; margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="limit"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="tableData.total" >
        </el-pagination>
        <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
                <el-input style="width:50%" v-model="form.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" :label-width="formLabelWidth" prop="logoUrl">
                    <el-upload 
                        class="avatar-uploader"
                        action="/dev-api/admin/product/fileUpload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateTrademark">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
    name: 'TrademarkList',
    data(){
        return {
            tableData:{},
            page: 1,
            limit:3,
            loading:false, 
            dialogFormVisible:false, 
            formLabelWidth: '120px',
            form:{
                id:'',
                tmName:'',
                logoUrl:''
            }
        }
    },
    methods: {
        // 点击添加,
        async addDialog(){
            this.dialogFormVisible = true
            this.form.id=''
            this.form.tmName=''
            this.form.logoUrl=''
            
        },
        //点击修改,回显品牌内容
        updateDialog(row){
            this.dialogFormVisible = true
            this.form ={...row}
        },
        //品牌Logo上传成功的钩子
        handleAvatarSuccess(response, file, fileList){
            this.form.logoUrl = response.data
        },
        //上传 之前的钩子,参数是上传的文件,做限制
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024  < 50;
            //................93517 0.08918476104736328
            // console.log(file.size,file.size / 1024 / 1024 )
            if (!isJPG) {
            this.$message.error({
                message:'上传头像图片只能是JPG格式!',
                duration:1000
            });
            }
            if (!isLt2M) {
            this.$message.error({
                message:'上传头像图片大小不能超过50kb!',
                duration:1000
            });
            }
            return isJPG && isLt2M;
        },
        //发送新增或修改请求
        async addOrUpdateTrademark(){
            //点击确定,关闭对话框
            this.dialogFormVisible = false
            const {id,tmName,logoUrl} = this.form
            const data = await this.$API.trademark.addOrUpdateTrademark({id,logoUrl,tmName})
            this.$message({
                message:'添加成功',
                duration:2000
            })
            //this.tableData.records代表当前页的数据
            let endPage = this.tableData.records.length === this.limit ? Math.floor(this.tableData.total/this.limit) + 1:Math.ceil(this.tableData.total/this.limit)
            console.log(endPage)
            //如果是修改完则是当前页,新增则最后一页或最后一页加1
            let pageNo = id ? this.page : endPage
            //更新界面
            this.getTrademarkListByPage(pageNo)
        },
        async delTrademark(row){
            try{
                await this.$confirm(`确定要删除${row.tmName}吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'})
                await this.$API.trademark.delTrademark(row.id)
                //提示删除成
                this.$message({
                    message:'删除成功',
                    duration:1000,
                })
                //更新页面
                // this.tableData.records.length当前页的数据条数
                let pageNo = this.tableData.records.length > 1 || this.tableData.total ===1 ? this.page:this.page-1
                await this.getTrademarkListByPage(pageNo)
            }catch(e){
                if(e==='cancel'){
                    this.$message({
                    message:'取消删除',
                    duration:1000
                })
                }
            }

            
        },
        async handleCurrentChange(page){
            await this.getTrademarkListByPage(page)
        },
        async handleSizeChange(size){
            if(size === this.limit) return
            this.limit = size
            await this.getTrademarkListByPage()
        },
        async getTrademarkListByPage(page=1){
            this.page = page
            this.loading = true
            const {data} = await this.$API.trademark.pageTrademark(this.page,this.limit)
            this.loading = false
            this.tableData = data
        }
    },
    async mounted () {
        await this.getTrademarkListByPage()
    }
    }

</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>